<template>
    <div ref="charts" class="chart"></div>
</template>
<style scoped>
 .chart{
     width: 100%;
     height: 100%;
     /* min-height: 10px; */
     /* width: 300px;
     height: 100px; */
 }
</style>
<script>
export default {
     name:"pictorialBar",
      props:{
          data:Object,
          option:Object
      },
     data(){
         return{}
     },
     methods:{
         init(){
             this.initEchart()
         },
         initEchart(){
                  var chart=this.$refs.charts
                  var myChart=echarts.init(chart);
                   if(myChart){
                     var value=Number(this.data.value)
                   if(this.data.total&&this.data.total!='undefined'){
                        var total=this.data.total-0
                   var  datas =total>0?(value / total * 100).toFixed(2):0;
                   var data=datas/100
                   }else{
                     var  data =value*0.01
                   }
                  var color=this.option&&this.option!="undefined"?this.option.color||'#53A9FF':'#53A9FF'
            var symbolSizeW = 10,symbolSizeH = 16;
            var option = {
                grid: {
                    left: 0,
                    top: 0,
                    bottom: 0,
                    right: 0
                },
                tooltip: {
                    show:false
                },
                xAxis: {
                    show:false
                },
                yAxis: [{
                    show:false,
                    type: "category",
                    inverse: false,
                    data: ["v"],
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            type: "dashed",
                            color: "#3e86dd"
                        }
                    },
                    axisLabel: {
                        margin: 35,
                        textStyle: {
                            color: "#fff",
                            fontSize: 14,
                        }

                    }
                }

                ],
                series: [
                    {
                        z: 4,
                        type: "pictorialBar",
                        symbolSize: [symbolSizeW, symbolSizeH],
                        symbolRepeat: "fixed",
                        data: [{
                            value: 1,
                            symbol: 'rect'
                        },
                        ],
                        itemStyle:{
                            color:'#EAEAEA'
                        },
                         label: {
                        normal: {
                            show: true,
                            position: 'left',
                            align:'left',
                            offset:[6,-(adaptePX(14)||12)],
                            formatter: '{b}',
                            textStyle: {
                                color:this.option?this.option.labelColor||'#000':"#000",
                                fontSize:  this.option.labelFontsize||adaptePX(12),
                            },
                        },


                        
                    },
                    },
                    {
                        z: 6,
                        type: "pictorialBar",
                        symbolSize: [symbolSizeW, symbolSizeH],
                        animation: true,
                        symbolRepeat: "fixed",
                        symbolClip: true,
                        symbolPosition: "start",
                        symbolOffset: [0, 0],
                        data: [{
                            value: data,
                            symbol: 'rect',
                        }],
                        label: {
                            show:false
                        },
                        itemStyle:{
                            color:color
                        }
                    }

                ]
            }
                      myChart.setOption(option)
                   }
         }
     },
     mounted() {
     this.init();
     },
     watch:{
         data:{
             handler(val){
             this.init()
            },
            deep:true
         }
     }
}
</script>
